<template>
	<view class="content">
    <view v-if="tabberPageLoadFlag[0]" :style="{display: currentIndex === 0 ? '' : 'none'}">
      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
        <Home ></Home>
      </scroll-view>
    </view>
    <view v-if="tabberPageLoadFlag[1]" :style="{display: currentIndex === 1 ? '' : 'none'}">
      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
        <Chat ></Chat>
      </scroll-view>
    </view>
    <view v-if="tabberPageLoadFlag[2]" :style="{display: currentIndex === 2 ? '' : 'none'}">
      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
        <Community ></Community>
      </scroll-view>
    </view>
    <view v-if="tabberPageLoadFlag[3]" :style="{display: currentIndex === 3 ? '' : 'none'}">
      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
        <My ></My>
      </scroll-view>
    </view>
    <tn-tabbar
        v-model="currentIndex"
        :list="tabbarList"
        activeColor="#838383"
        inactiveColor="#AAAAAA"
        activeIconColor="tn-cool-bg-color-7"
        :animation="true"
        :safeAreaInsetBottom="true"
        @change="switchTabbar"
    ></tn-tabbar>
	</view>
</template>

<script>
  import Home from '../../components/home/index.vue'
  import Chat from '../../components/chat/index.vue'
  import Community from "@/components/community/index.vue";
  import My from "@/components/my/index.vue";
  import Publish from "@/components/publish/publish.vue";
	export default {
    components:{
      Home,
      Chat,
      Community,
      My,
      Publish
    },
		data() {
			return {
        // 自定义底栏对应页面的加载情况
        tabberPageLoadFlag: [true],
				title: 'Hello',
        // tabbar当前被选中的序号
        currentIndex: 0,
        tabbarList: [
          {
            title: '首页',
            activeIcon: 'home-fill',
            inactiveIcon: 'home'
          },
          {
            title: 'AI对话',
            activeIcon: 'ai-fill',
            inactiveIcon: 'ai'
          },
          {
            title: '社区',
            activeIcon: 'discover-fill',
            inactiveIcon: 'discover',
            count: 100
          },
          {
            title: '我的',
            activeIcon: 'my-circle-fill',
            inactiveIcon: 'my-circle',
            dot: true
          }
        ],
			}
		},
    onLoad(options) {
      const index = Number(options.index || 0)
      // 根据底部tabbar菜单列表设置对应页面的加载情况
      this.tabberPageLoadFlag = this.tabbarList.map((item, tabbar_index) => {
        return index === tabbar_index
      })
      console.log(options)
      this.switchTabbar(index)
    },
		methods: {
      // 切换导航
      switchTabbar(index) {
        this._switchTabbarPage(index)
      },


      // 导航页面滚动到底部
      tabbarPageScrollLower(e) {
      },
      // 切换导航页面
      _switchTabbarPage(index) {
        const selectPageFlag = this.tabberPageLoadFlag[index]
        if (selectPageFlag === undefined) {
          return
        }
        if (selectPageFlag === false) {
          this.tabberPageLoadFlag[index] = true
        }
        this.currentIndex = index
      }
    }
	}
</script>

<style lang="scss">

  .custom-tabbar-page {
    height: calc(100vh - (100rpx + env(safe-area-inset-bottom) / 2));
  }
</style>
